<template>
  <!-- 登录页面 -->
  <div class="login box">
    <div class="container row header mb-4">
      <h2>欢迎登录</h2>
    </div>
    <form
      action=""
      class="container"
      autocomplete="off"
      @submit.prevent="onSubmit()"
    >
      <!-- 账号 -->
      <div class="row mb-4 form-group">
        <span class="iconfont icon-yonghu"></span>
        <input
          type="text"
          class="form-control"
          name="username"
          v-model="username"
        />
      </div>
      <!-- 密码 -->
      <div class="row mb-4 form-group">
        <span class="iconfont icon-mima"></span>
        <input
          type="password"
          class="form-control"
          name="password"
          v-model="password"
        />
      </div>
      <div class="row mb-4">
        <button type="submit" class="btn btn-primary">登录</button>
      </div>
      <div class="row mb-3">
        <!-- <a href="javascript:;">还没有账号，去注册</a> -->
        <router-link class="link register-a" to="/register"
          >还没有账号，去注册</router-link
        >
      </div>
    </form>
  </div>
</template>

<script scoped>
import { loginAPI } from "@/api/article";
export default {
  data() {
    return {
      username: "qqzzkk",
      password: "qqzzkk",
    };
  },

  methods: {
    async onSubmit() {
      const res = await loginAPI({
        // username: "123123",
        username: this.username,
        password: this.password,
        // password: "123123",
      });
      // console.log("res", res);
      if (res.data.code === 0) {
        this.$toast.success(res.data.message);
        // console.log(res);
        // localStorage.setItem("eeToken", res.data.token);
        setTimeout(() => {
          this.$router.push({ path: "/subject" });
        }, 1500);
      } else if (res.data.code === 1) {
        this.$toast.fail(res.data.message);
      }
    },
  },
  watch: {},
};
</script>

<style scoped>
.bobox {
  background-color: #2b2e3e;
}
.box {
  width: 360px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

.header {
  display: flex;
  align-items: center;
}

.header h2 {
  font-size: 22px;
}

.form-group {
  position: relative;
}

.iconfont {
  position: absolute;
  left: 4px;
  top: 6px;
  font-weight: bold;
  color: #a9a9aa;
  width: 36px;
}

input.form-control {
  padding-left: 40px;
}
</style>